<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Personal Center</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/respond.js"></script>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <!--webfont-->
    
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>

    <script>
        $(function(){
            $(".hov").hide();
            $(".text").hide();
            $(".col-md-3").hover(function(){
                        $(this).find(".hov").stop().fadeTo(286,0.5)
                        $(this).find(".text").stop().show();
                    },
                    function(){
                        $(this).find(".hov").stop().fadeTo(286,0)
                        $(this).find(".text").stop().hide();
                        // $(this).find(".text").animate({left:"-286px"}, {duration: 0})
                    });
        });
    </script>
    <style>
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti;
            margin: 0;
        }
        .main-nav-a a:hover{
            color:#ff5656;
        }

        .main-nav-a a:focus{
            color:#ff8e92;
        }
        a span
        {
            font-size: 20px;
            font-weight: 700;
        }

        /*********************************************自定义部分*********************************************/
        .secondmenu a {
            font-size: 12px;
            color: #4A515B;
            text-align: center;
            border-radius: 4px;
        }

        .secondmenu > li > a:hover {
            background-color: rgba(179,137,68,0.7);
            color: #ffffff;
        }

        .secondmenu>li.focus {
            background-color: rgba(222,202,196,0.5);
            border-radius: 4px;
            color:#ff5656;
        }

        .secondmenu li.focus > a {
            color: #ff5656;
        }




        .collapse.glyphicon-chevron-toggle, .glyphicon-chevron-toggle:before {
            content: "\e113";
        }

        .collapsed.glyphicon-chevron-toggle:before {
            content: "\e114";
        }
        .UserInfo{
            text-align: center;
        }
    </style>
</head>
<body>
<!-- header-section-starts -->

<div class="navigation-strip">
    <div class="container">
        <div class="nav_content">
            <div class="home">
                <a href="index.html"><img src="images/imangine.png" alt="" /></a>
            </div>
            <div class="search">
                <form>
                    <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>
                    <input type="submit" value="">
                </form>
            </div>
            <div class="reglogbar-user pull-right">
                <div class="userp">
                     <span>Jully Coco &nbsp;</span>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
            <span class="menu"></span>
            <div class="top-menu">
                <ul>
                    <li><a class="active" href="pic.html">Picture</a></li>
                    <li><a href="album.html">Album</a></li>
                    <li><a href="group.html">Group</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="about.html">About us</a></li>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <!-- script for menu -->
            <script>
                $( "span.menu" ).click(function() {
                    $( ".top-menu" ).slideToggle( "slow", function() {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script for menu -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked" style="">
                        <li class="main-nav-a">
                            <a href="personal.html">
                                <i class="glyphicon glyphicon-th-large"></i>
                                <span>Personal Information</span>
                            </a>
                        </li>
                        <li class="main-nav-a">
                            <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-cog"></i>
                                <span>Modify Information</span>
                                <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                            </a>
                            <ul id="systemSetting" class="nav nav-list secondmenu collapse" style="height: 0px;">
                                <li><a href="personal-modify.html"><i class="glyphicon glyphicon-user"></i>&nbsp;<span>Modify Basic Info</span> </a></li>
                                <!--<li><a href="#"><i class="glyphicon glyphicon-th-list"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-edit"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;--</a></li>-->
                            </ul>
                        </li>
                        <li class="main-nav-a">
                            <a href="#disSetting" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-globe"></i>
                                <span>Firends Circle</span>
                                <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                            </a>
                            <ul id="disSetting" class="nav nav-list secondmenu collapse">
                                <li><a href="watchlist.html"><i class="glyphicon glyphicon-th-list"></i>&nbsp;<span>My Watchlist</span></a></li>
                            </ul>

                        </li>

                        <!--<li class="main-nav-a">-->
                        <!--<a href="#dicSetting" class="nav-header collapsed" data-toggle="collapse">-->
                        <!--<i class="glyphicon glyphicon-bold"></i>-->
                        <!--字典配置-->
                        <!--<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>-->
                        <!--</a>-->
                        <!--<ul id="dicSetting" class="nav nav-list secondmenu collapse">-->
                        <!--<li><a href="#"><i class="glyphicon glyphicon-text-width"></i>&nbsp;关键字配置</a></li>-->
                        <!--</ul>-->
                        <!--</li>-->
                        <li class="main-nav-a">
                            <a href="news.html">
                                <i class="glyphicon glyphicon-fire"></i>
                                <span>News</span>
                                <span class="badge pull-right">1</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-9 filler">
                    <form role="form" action="UserReg" enctype="multipart/form-data" method="post">
                        <div class="position"></div>
                        <div class="form-group">
                            <label for="inputfile">Modify Avatar</label>
                            <br />
                            <a href="#" class="input-file">Browse...<input type="file" id="inputfile"></a>
                            <!--<p class="help-block">这里是块级帮助文本的实例。</p>-->
                        </div>
                        <div class="form-group">
                            <label for="name">Modify Nickname</label>
                            <input type="text" class="form-control" id="name"
                                   placeholder="Please input your new nickname">
                        </div>
                        <div class="form-group">
                            <label for="password">Modify Password</label>
                            <input type="password" class="form-control" id="password"
                                   placeholder="Please input your password">
                        </div>
                        <div class="form-group">
                            <label for="password">New Password</label>
                            <input type="password" class="form-control" id="password"
                                   placeholder="Input new password">
                        </div>
                        <div class="form-group">
                            <label for="password">Confirm Password</label>
                            <input type="password" class="form-control" id="password"
                                   placeholder="Confirm new password">
                        </div>
                        <button type="submit" class="btnsub">Submit</button>
                        <div class="position"></div>
                    </form>
                </div>
            </div>
        </div>



        </div>

        <!---/start-text-slider-->

    </div>

<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="col-md-4 footer-grid">
                <h5>ABOUT US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
            </div>
            <div class="col-md-4 footer-grid">
                
            </div>
            <div class="col-md-4 footer-grid">
                <h5>FOLLOW US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="copyrights">
                <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
            </div>
            <div class="go-top">
                <a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

</body>
</html>